<template>
    <!--数字资源：标签条-->
    <router-link class="text-box" :to="to">
        {{resourceData.title}}
    </router-link>
</template>

<script>
export default {
    name: "TitleLabel",
    props:{
       resourceData:{
           type:Object,
           default(){
               return {}
           }
       },
       to:{
           type:Object,
           default(){
               return {path:'', query:{code:''}}
           }
       }
    }
}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width:576px){
    @width:18vw;
    @height:6vw;
    .text-box{
        width:@width;
        height:@height;
        line-height:@height;
        text-align:center;
        padding:0 1vw;
        color:black;
        font-size:3vw;
        background: #FFFFFF;
        .line-ellipsis(1);
        border:1px solid rgba(112, 112, 112, 1);
        border-radius:1vw;
        cursor:pointer;
        &:hover{
            background: #448ACA;
            opacity: 0.95;
            border:none;
            color:white;
        }

    }
}

//pc
@media only screen and (min-width: 576px){
    .text-box{
        max-width:100px;
        height:30px;
        line-height:30px;
        text-align:center;
        padding:0 5px;
        color:black;
        font-size:14px;
        background: #FFFFFF;
        .line-ellipsis(1);
        border:1px solid rgba(112, 112, 112, 1);
        border-radius:5px;
        cursor:pointer;
        box-sizing: border-box;
        &:hover{
            background: #448ACA;
            opacity: 0.95;
            border:none;
            color:white;
            box-sizing: border-box;
        }
    }
}

</style>